<template>
  <div class="my-container w-full h-full bg-black">
    <div class="top">
      <div class="back cursor-pointer" @click="back">
        <img
          class="w-12 h-12 lg:w-20 lg:h-20"
          src="/images/backIcon.png"
          alt=""
        />
        <span class="text-2xl lg:text-4xl">返回</span>
      </div>
      <h2 class="text-2xl lg:text-4xl">微信扫码支付</h2>
    </div>
    <div class="w-full h-full flex justify-center items-center">
      <div class="w-60 h-60 lg:w-80 lg:h-80 lg:py-8 bg-white border-solid border rounded-md border-gray-300 p-4 flex  items-center flex-col">
        <div class="w-40 h-40 lg:w-60 lg:h-60 bg-gray-400">
            <img :src="payCode" class="w-full h-full object-contain" alt="微信支付二维码">
        </div>
        <div class="mt-4 ">
            请使用微信扫码支付
        </div>
        <div></div>
      </div>
    </div>
    <MyAlert ref="myAlert"></MyAlert>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {useRouter} from 'vue-router'
import * as QRCode from 'qrcode'
import MyAlert from '@/components/alert/index.vue'
import {fetchGenerateReport,fetchGetPayStat,fetchNativePay} from '@/assets/api/index.js'
const baseUrl = import.meta.env.BASE_URL

const router = useRouter()
const myAlert = ref()

const back = ()=> {
    router.replace('/report')
}

//生成二维码
const generateQR = async (text) => {
    try {
        return await QRCode.toDataURL(text)
    } catch (err) {
        console.error(err)
    }
}
//获取支付链接
const payCode = ref('')
const orderId = ref(0)
const nativePay = async () => {
    // showRes.value = false
    // let { data, status, statusText } = await fetchPayNative(goods_id, 1)
    // if (status !== 200) {
    //     return dialog.warning({
    //         title: '提示',
    //         content: data.msg || statusText,
    //         positiveText: "确认"
    //     })
    // }
    let res = await fetchNativePay()
    if(res.code !== 0){
      createLoop()
      return myAlert.value.showAlert(res.message)
    }
    let url = res.data.code_url
    console.log(url)
    payCode.value = await generateQR(url)
    // orderId.value = data.order_id
    // queryOrderLoop()
    createLoop()
}

const createLoop = async ()=>{
  let count = 1
    while(count++){
      if(count >= 600){
        return 
      }
      let res = await fetchGetPayStat()
      if(res.code !== 0){
        return myAlert.value.showAlert(res.message)
      }
      if(res.data.pay_stat == 1){
        return myAlert.value.showAlert('支付已完成',false,()=>{
          router.replace('/report')
        })
      }
      console.log('进入循环')
      await  sleep
    }
}

const sleep  = async ()=>{
  return new Promise((resolve,reject)=>{
    setTimeout(resolve,1000)
  })
}

onMounted(()=>{
    nativePay()

    // setTimeout(createLoop,1000)
})

</script>

<style scoped>
.my-container .top {
  position: absolute;
  width: 100%;
  height: 15%;
  /* background: white; */
  /* position: relative; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 2;
  top: 0;
  left: 0;
  /* color: white; */
}

.top .back {
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top .back img {
  width: 4rem;
  margin-right: 1rem;
  cursor: pointer;
}

.back span {
  font-size: 2rem;
  color: white;
}

.top h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: white;
}

#right {
  z-index: 2;
  cursor: pointer;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 15%;
  height: 3rem;
  font-size: 1.5rem;
  background: linear-gradient(to right, rgb(150, 150, 249), rgb(105, 105, 252));
  /* background: blue; */
  border-radius: 2rem;
  border: none;
  color: white;
}

#left {
  z-index: 2;
  cursor: pointer;
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 15%;
  height: 3rem;
  font-size: 1.5rem;
  background: linear-gradient(to right, rgb(150, 150, 249), rgb(105, 105, 252));
  /* background: blue; */
  border-radius: 2rem;
  border: none;
  color: white;
}

.dialog-box-contaner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 1);
}

.dialog-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 57.9vw;
  height: 32.03vw;
  border-radius: 20px;
  background-color: #fff;
}

.dialog-body {
  padding: 5.07vw;
}

.body-title {
  font-size: 3.613vw;
  font-weight: bolder;
}

.body-content {
  margin-top: 2.441vw;
  font-size: 2.637vw;
}

.dialog-bottom {
  position: absolute;
  bottom: 5.27vw;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.dialog-bottom > div {
  width: 23.83vw;
  height: 7.03vw;
  font-size: 2.93vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 300px;
}

.btn-cancel {
  margin-right: 2.246vw;
  background-color: #d8ddd6;
  color: #000;
}

.btn-confirm {
  color: #fff;
  background: linear-gradient(to right, rgb(150, 150, 249), rgb(105, 105, 252));
}
</style>
